<template>
  <div>
    <div>
      <el-button type="primary" size="mini" @click="textBtnClick(true, false)">编 码</el-button>
      <el-button type="primary" size="mini" @click="textBtnClick(false, false)">解 码</el-button>
      <el-button type="primary" size="mini" @click="textBtnClick(true, true)">hex编码</el-button>
      <el-button type="primary" size="mini" @click="textBtnClick(false, true)">hex解码</el-button>
      <el-button type="primary" size="mini" @click="imageBtnClick(true)">图片编码</el-button>
      <el-button type="primary" size="mini" @click="imageBtnClick(false)">图片解码</el-button>
    </div>

    <!--提示框-->
    <el-dialog
      :title="'base64' + (hex ? '(hex)' : '') + (coding ? '编码' : '解码')"
      :visible.sync="textPopiIsShow"
      width="800px"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="Input">
          <el-input v-model="form.inputValue" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="form.data" label="Data">
          <el-card :body-style="{ padding: '0px 15px' }" class="box-card">
            <span>{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="!form.inputValue"
            size="mini"
            class="float-right"
            style="margin-left: 20px"
            type="primary"
            @click="textOkBtnClick"
          >确 定</el-button>
          <el-button size="mini" class="float-right" @click="textPopiIsShow = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--提示框-->
    <el-dialog
      :title="'base64-图片' + (coding ? '编码' : '解码')"
      :visible.sync="imagePopiIsShow"
      width="800px"
    >
      <div v-if="coding">
        <p v-if="form.data" class="box-card image-base-64">{{ form.data }}</p>
        <p v-else>
          <up-image @upFinish="imageUpFinish"/>
        </p>
      </div>
      <div v-else>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="Input">
            <el-input v-model="form.inputValue" type="textarea"/>
          </el-form-item>
          <el-form-item v-if="form.data" label="Data">
            <img :src="form.data" style="max-width: 200px">
          </el-form-item>
        </el-form>
      </div>

      <div class="clearfix">
        <el-button
          :disabled="!form.inputValue"
          style="margin-left: 20px"
          size="mini"
          class="float-right"
          type="primary"
          @click="imageOkBtnClick"
        >确 定</el-button>
        <el-button class="float-right" size="mini" @click="imagePopiIsShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import API from "@/api/apis";
import UpImage from "../../components/upImage.vue";
import { post } from "@/api/ajax";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    UpImage
  }
})
export default class WebToolCodingBase64 extends Vue {
  textPopiIsShow = false;
  // 编码还是解码
  coding = true;
  // hex
  hex = false;
  form = {
    inputValue: "",
    data: ""
  };
  type = "";
  // 图片base64是否显示
  imagePopiIsShow = false;
  imageBase64 = "";

  textBtnClick(coding: boolean, hex: boolean) {
    this.form = {
      inputValue: "",
      data: ""
    };
    this.coding = coding;
    this.hex = hex;
    this.type = this.getType();
    this.textPopiIsShow = true;
  }
  // 获取类型
  getType() {
    if (this.coding) {
      return this.hex ? "hexEncode" : "encode";
    } else {
      return this.hex ? "hexDecode" : "decode";
    }
  }
  textOkBtnClick() {
    post(API.coding.base64, {
      code: this.form.inputValue,
      type: this.type
    })
      .then((data: any) => {
        this.form.data = data;
      })
      .catch(() => {});
  }
  imageBtnClick(coding: boolean) {
    this.coding = coding;
    this.form.inputValue = "";
    this.form.data = "";
    this.imagePopiIsShow = true;
  }
  imageUpFinish(url: string) {
    this.form.inputValue = url;
  }
  imageOkBtnClick() {
    if (this.coding) {
      post(API.coding.imageToBase64, {
        imageUrl: this.form.inputValue
      })
        .then((data: any) => {
          this.form.data = data;
        })
        .catch(() => {});
    } else {
      post(API.coding.base64ToImage, {
        imageStr: this.form.inputValue
      })
        .then((data: any) => {
          this.form.data = data;
        })
        .catch(() => {});
    }
  }
}
</script>

<style scoped>
.image-base-64 {
  word-wrap: break-word;
  word-break: break-all;
}
</style>
